<template>
  <div class="page">
    <div style="margin-bottom: 20px">
      <label>题目提交状态:</label>
      <a-dropdown
        @select="handleSelect"
        :size="'large'"
        style="margin-right: 20px"
      >
        <a-button v-if="!searchParams.status"
          >全部<i class="iconfont icon-xia"
        /></a-button>
        <a-button v-else
          >{{ statusArray[searchParams.status] }}<i class="iconfont icon-xia"
        /></a-button>
        <template #content>
          <a-doption :value="0">
            <a-tag color="#5cdbd3">等待中</a-tag>
          </a-doption>
          <a-doption :value="1">
            <a-tag color="#ffc069">运行中</a-tag>
          </a-doption>
          <a-doption :value="2">
            <a-tag color="#95de64">成功</a-tag>
          </a-doption>
          <a-doption :value="3">
            <a-tag color="#ff4d4f">失败</a-tag>
          </a-doption>
        </template>
      </a-dropdown>
      <label>语言:</label>
      <a-dropdown
        @select="handleSelectLanguage"
        :size="'large'"
        style="margin-right: 20px"
      >
        <a-button v-if="!searchParams.language"
          >全部语言<i class="iconfont icon-xia"
        /></a-button>
        <a-button v-else
          >{{ searchParams.language }}语言<i class="iconfont icon-xia"
        /></a-button>
        <template #content>
          <a-doption :value="'java'">
            <a-tag color="#13c2c2"><i class="iconfont icon-java" />java</a-tag>
          </a-doption>
          <a-doption :value="'python'">
            <a-tag color="#40a9ff"
              ><i class="iconfont icon-Python" />python
            </a-tag>
          </a-doption>
          <a-doption :value="'c++'">
            <a-tag color="#597ef7"
              ><i class="iconfont icon-cpp" /> cpp />
            </a-tag>
          </a-doption>
          <a-doption :value="'c'">
            <a-tag color="#9254de"><i class="iconfont icon-c" />c语言</a-tag>
          </a-doption>
        </template>
      </a-dropdown>
      <a-button
        type="primary"
        size="large"
        status="success"
        @click="getAllData"
        style="margin-left: 20px"
      >
        全部
        <template #icon>
          <i class="iconfont icon-sousuo" />
        </template>
      </a-button>
    </div>
    <a-row>
      <a-col>
        <a-table
          style="z-index: 10"
          @page-change="selectNext($event)"
          :columns="columns"
          :data="dataList"
          size="large"
          :pagination="pageInfo"
          :table-layout-fixed="false"
          :bordered="{ cell: true }"
          :column-resizable="true"
          page-position="bottom"
        >
          <template #status="{ record }">
            <a-space wrap v-if="record.status == '成功'">
              <a-tag color="#95de64">{{ record.status }}</a-tag>
            </a-space>
            <a-space wrap v-else-if="record.status == '运行中'">
              <a-tag color="#ffc069">{{ record.status }}</a-tag>
            </a-space>
            <a-space wrap v-else-if="record.status == '等待中'">
              <a-tag color="#5cdbd3">{{ record.status }}</a-tag>
            </a-space>
            <a-space wrap v-else-if="record.status == '失败'">
              <a-tag color="#ff4d4f">{{ record.status }}</a-tag>
            </a-space>
          </template>
          <template #createTime="{ record }">
            {{ moment(record.createTime).format("YYYY-MM-DD hh:mm:ss") }}
          </template>
          <template #language="{ record }">
            <a-tag v-if="record.language == 'java'" color="#13c2c2"
              ><i class="iconfont icon-java" />java
            </a-tag>
            <a-tag v-else-if="record.language == 'python'" color="#40a9ff"
              ><i class="iconfont icon-Python" />python
            </a-tag>
            <a-tag v-if="record.language == 'c'" color="#9254de"
              ><i class="iconfont icon-c" />c语言
            </a-tag>
            <a-tag v-if="record.language == 'c++'" color="#597ef7"
              ><i class="iconfont icon-cpp" />c++
            </a-tag>
          </template>
          <template #watch="{ record }">
            <a-space>
              <a-button
                type="primary"
                :status="submit?.id == record.id ? 'success' : 'warning'"
                @click="watchSubmit(record)"
              >
                查看
              </a-button>
            </a-space>
          </template>
        </a-table>
      </a-col>
    </a-row>
  </div>
</template>

<script setup lang="ts">
import { onBeforeMount, onMounted, reactive, ref } from "vue";
import {
  QuestionSubmitControllerService,
  QuestionSubmitQueryRequest,
  QuestionSubmitVO,
} from "../../../generated";
import message from "@arco-design/web-vue/es/message";
import { useRouter } from "vue-router";
import { useQuestion } from "@/store/question";
import { storeToRefs } from "pinia";
import moment from "moment";
import { useUser } from "@/store/user";

const router = useRouter();
const user = useUser();
let { loginUser } = storeToRefs(user);
const question = useQuestion();
let { submit, questionId } = storeToRefs(question);
let statusArray = ["等待中", "运行中", "成功", "失败"];
const dataList = ref([]);
const searchParams = ref<QuestionSubmitQueryRequest>({
  current: 1,
  pageSize: 8,
  sortField: "createTime",
  sortOrder: "descend",
  userId: loginUser.value.id,
  language: "",
});

const pageInfo = reactive({
  current: 1,
  pageSize: 8,
  total: 0,
});
const loadData = async () => {
  const res =
    await QuestionSubmitControllerService.listQuestionSubmitByPageUsingPost1(
      searchParams.value
    );
  if (res.code === 0) {
    dataList.value = res.data.records;
    pageInfo.total = res.data.total;
  } else {
    message.error("加载失败，" + res.message);
  }
};

onMounted(async () => {
  await loadData();
  Object.assign(submit.value, dataList.value[0]);
});

async function selectNext(event: any) {
  searchParams.value.current = event;
  pageInfo.current = event;
  await loadData();
  submit.value = dataList.value[0];
}

const columns = [
  {
    title: "题号",
    dataIndex: "questionId",
    align: "center",
  },
  {
    title: "语言",
    slotName: "language",
    align: "center",
  },
  {
    title: "提交状态",
    slotName: "status",
    align: "center",
  },
  {
    title: "提交日期",
    slotName: "createTime",
    align: "center",
  },
  {
    title: "操作",
    slotName: "watch",
    align: "center",
  },
];

// eslint-disable-next-line no-undef
defineProps(["watchSubmit", "isLimitQuestion"]);

const handleSelect = (v: number) => {
  searchParams.value.status = v;
  loadData();
};

const handleSelectLanguage = (v: string) => {
  searchParams.value.language = v;
  loadData();
};

const getAllData = () => {
  searchParams.value = {
    current: 1,
    pageSize: 8,
    sortField: "createTime",
    sortOrder: "descend",
    language: "",
    userId: loginUser.value.id,
  } as QuestionSubmitQueryRequest;
  loadData();
};
</script>

<style scoped>
.page {
  background-color: white;
  padding: 20px;
  margin: 10px;
  border-radius: 1ch;
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
  min-height: 500px;
  z-index: -1;
}
</style>
